<template>
  <top-nav class="top-nav transDot3" :class="{navScroll: scrollDirection}"></top-nav>
  <router-view></router-view>
</template>

<script>
import throttle from 'lodash/throttle'
import TopNav from '@/components/TopNav.vue';

export default {
  name: 'App',
  components: {
    TopNav,
  },
  data() {
    return {
      scrollDirection: false
    }
  },
  mounted () {
    this.$store.commit("welcome");

    let beforeY = 0;
    document.addEventListener('scroll',throttle(() => {
      if(window.scrollY - beforeY > 0) {
        this.scrollDirection = true;
      } else {
        this.scrollDirection = false;
      }
      beforeY = window.scrollY
    }, 200));
  },
}
</script>

<style lang="less">
@import '@/assets/style/base.css';

#app {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  min-height: 120vh;
}

.top-nav {
  position: fixed;
  top: 0;
  z-index: 99999;
}

.navScroll {
  transform: translateY(calc(-1 * (var(--topNavHeight) + 10px)));
}
</style>
